<template>
  <div class="login_container" v-loading="loading">
    <el-row>
        <el-col :xs="24" :sm="24" :md="12" :lg="16" :xl="16">
          <div style="color: transparent">占位符</div>
          <!-- <div class="login_Bg"></div> -->
        </el-col>
        <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
        <!-- 登陆框 -->
        <div class="login_box">
          <!-- 表单区域 -->
          <el-form
            class="login_form"
            :model="loginForm"
            :rules="rules"
            ref="loginForm"
          >
            <div class="title">hello !</div>
            <div class="title-tips">欢迎来到{{ title }}！</div>
            <!-- 用户名 -->
            <el-form-item prop="username">
              <el-input
                v-model="loginForm.username"
                placeholder="请输入用户名"
                prefix-icon="el-icon-user"
                clearable
              ></el-input>
            </el-form-item>
            <!-- 密码 -->
            <el-form-item prop="password">
              <el-input
                placeholder="请输入密码"
                prefix-icon="el-icon-lock"
                v-model="loginForm.password"
                show-password
                type="password"
              ></el-input>
            </el-form-item>
            <!-- 登录按钮 -->
            <el-form-item class="login_btns">
              <el-button type="primary" @click="loginFormLogin" :loading="loading">登录</el-button>
              <el-button type="info" @click="loginFormReset">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "login",
  data() {
    return {
      title: 'vue-admin-awei',
      dateNode: '',
      loginForm: {
        username: "admin",
        password: "123456",
      },
      // 验证表单输入是否合法
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 15,
            message: "长度在 6 到 15 个字符",
            trigger: "blur",
          },
        ],
      },
      loading: false,
    };
  },
  methods: {
    // 重置按钮功能
    loginFormReset() {
      this.$refs.loginForm.resetFields();
    },
    // 登录功能
    loginFormLogin() {
      // 验证表单内容是否合法
      this.$refs.loginForm.validate(async (value) => {
        if (!value) return;
        this.loading = true
        // 获取服务器数据并验证是否有对应的用户
        const { data: res } = await this.$http.post("login", this.loginForm);
        if (res.meta.status !== 200) {
          this.$refs.loginForm.$message({
            message: "用户名密码有误,请重新输入!",
            type: "warning",
            duration: 2000,
          });
        } else {
          this.notifyOpen()
          window.sessionStorage.setItem("token", res.data.token);
          this.$router.push("/home");
        }
      });
    },
    // 登录之后提示信息
    notifyOpen() {
      this.getDateNode()
      this.$notify({
          title: this.dateNode,
          message: '欢迎登录vue-admin-awei',
          type: 'success',
          duration: 3000
      });
    },
    // 获取当前时间
    getDateNode() {
        const dateHours = new Date().getHours();
        if (dateHours >= 0 && dateHours < 6) {
            this.dateNode = "早上好"
        } else if (dateHours >= 6 && dateHours < 12) {
            this.dateNode = "上午好"
        } else if (dateHours >= 12 && dateHours < 18) {
            this.dateNode = "下午好"
        } else {
            this.dateNode = "晚上好"
        }
    }
  },
};
</script>

<style lang="less" scoped>
//背景
.login_container {
  height: 100vh;
  background: url('../assets/background.png') left center no-repeat fixed;
  // background-size: cover;
}

// .login_Bg{
//   height: 100vh;
//   // background: url('../assets/background.png') left center no-repeat fixed;
// }


//登陆框
.login_box {
  width: 600px;
  height: 100vh;
  display: flex;
  align-items: center;
  .login_form {
    width: 100vw;
    padding: 20px;
    box-sizing: border-box;
    .title {
      font-size: 54px;
      font-weight: 500;
      color: rgba(14, 18, 26, 1);
    }

    .title-tips {
      margin: 20px 0 20px 0 ;
      font-size: 26px;
      font-weight: 400;
      color: rgba(14, 18, 26, 1);
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .login_btns {
      display: flex;
      justify-content: flex-end;
    }
  }
}
</style>
